<template>
  <div class="operateBtn" :key="optionModel.value">
    <el-form-item label="onBtnClick" label-width="150px">
      <el-select v-model="optionModel.value" placeholder="请选择">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
    </el-form-item>

    <el-form-item
      label="页面"
      label-width="150px"
      v-if="optionModel.value === 'showPage'"
    >
      <el-select v-model="optionModel.pageInfo.code" placeholder="请选择">
        <el-option
          v-for="item in listData"
          :key="item.code"
          :label="item.nameCn"
          :value="item.code"
        >
        </el-option>
      </el-select>
    </el-form-item>
    <div v-if="optionModel.value === 'showPage'" class="addBtn">
      <el-button size="mini" @click="showAddPage">新增页面</el-button>
    </div>
    <div v-if="optionModel.value === 'createObject'">
      <el-form-item label="绑定实体" label-width="150px">
        <el-select-tree
          :value.sync="optionModel.entity"
          :options="designer.entityList"
        ></el-select-tree>
      </el-form-item>
      <el-form-item label="页面" label-width="150px">
        <el-select v-model="optionModel.pageInfo.code" placeholder="请选择" @change="changePage">
          <el-option
            v-for="item in listData"
            :key="item.code"
            :label="item.nameCn"
            :value="item.code"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <div class="addBtn">
        <el-button size="mini" @click="showAddPage">新增页面</el-button>
      </div>
      <add-page
        :key="dialogKey"
        :optionModel="optionModel"
        :visible.sync="visible"
        :designer="designer"
        :rowData="rowData"
        @triggerAddPage="triggerAddPage"
      >
      </add-page>
    </div>
  </div>
</template>

<script>
import i18n from "@/utils/i18n";
import ElSelectTree from "@/components/el-select-tree.vue";
import AddPage from "@/components/form-designer/config-common/add-page.vue";

import eventMixin from "@/components/form-designer/setting-panel/property-editor/event-handler/eventMixin";
import * as appApi from "@/api/applicationManage/applicationManage";
import * as entityApi from "@/api/modulManage/entity";

export default {
  name: "onBtnClick-editor",
  components: { ElSelectTree, AddPage },
  mixins: [i18n, eventMixin],
  props: {
    designer: Object,
    selectedWidget: Object,
    optionModel: Object,
    rowData: Object,
  },
  data() {
    return {
      eventParams: [],
      visible: false,
      value: "",
      dialogKey:0,
      options: [
        {
          value: "none",
          label: "Do nothing",
        },
        {
          value: "showPage",
          label: "Show a page",
        },
        {
          value: "createObject",
          label: "Create object",
        },
        {
          value: "closePage",
          label: "Close page",
        },
        {
          value: "delete",
          label: "Delete",
        },
      ],
      listData: [],
      originList: [],
    };
  },
  watch: {
    "optionModel.page": {
      handler(val) {
        console.log('optionModel',this.optionModel)
        // 初始化
        if (val) {
          const [selected] = this.listData.filter((v) => v.code === val);
          if (selected) {
            this.optionModel.pageInfo = {
              code: selected.code,
              addPageId: selected.oid,
              json: selected.json,
            };
          }
        }
      },
      deep: true,
      immediate: true,
    },
    "optionModel.entity": {
      handler(val) {
        // 初始化
        if (val) {
          this.listData = this.originList.filter(v=>v.entity === val);
          this.optionModel.page='';
          this.visible=false;
        }
      },
      deep: true,
      immediate: true,
    },
  },
  mounted() {
    this.getEntityList();
    this.getPageList();
    this.dialogKey=0;
    this.visible=false;
  },
  methods: {
    changePage(val){
      this.optionModel.page= val;
       this.dialogKey+=1;
    },    
    getEntityList() {
      entityApi.from_to().then((res) => {
        this.designer.entityList = res.data.data;
      });
    },
    getPageList() {
      let applicationId = localStorage.getItem("appId");
      appApi.page(1, 100, { applicationId }).then((res) => {
        const { list } = res.data.data;
        if(this.optionModel.entity){
          this.listData = list.filter(v=>v.entity === this.optionModel.entity);
        }else{
          this.listData = [...list];
        }
        this.originList = [...list];
      });
    },
    showAddPage(){
      this.visible = true;
      this.dialogKey+=1;
    },
    triggerAddPage(data) {
      this.visible = !this.visible;
      this.dialogKey+=1;
      if (data&& data.code) {
        this.getPageList();
        this.optionModel.pageInfo = data;
        this.optionModel.page = data.code;
      }
    },
  },
};
</script>

<style scoped lang="scss">
.operateBtn {
  .addBtn {
    text-align: right;
    padding: 5px;
  }
}
</style>
